<template>
  <div class="app-container">
    <!--查询-->
    <el-form :inline="true">
      <el-form-item label="关键字">
        <el-select
          v-model="searchForm.questionNameList"
          clearable
          filterable
          allow-create
          multiple
          :multiple-limit="3"
          placeholder="可创建 多选"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.keywords"
            :value="item.keywords"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="公司名称">
        <el-input
          v-model="searchForm.deptName"
          placeholder=" 公司 / 部门 名称"
          clearable
          @blur="questionPage"
          @keyup.enter.native="questionPage"
        />
      </el-form-item>
      <el-form-item label=" 面试时间">
        <el-date-picker
          v-model="interviewTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          clearable
          @blur="questionPage"
          @keyup.enter.native="questionPage"
        />
      </el-form-item>
      <el-form-item label=" 问题难度">
        <el-select
          v-model="searchForm.questionLevel"
          @blur="questionPage"
          @keyup.enter.native="questionPage"
        >
          <el-option label="简单" value="0" />
          <el-option label="适中" value="1" />
          <el-option label="困难" value="2" />
          <el-option label="地狱" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label=" 问题标签">
        <el-select
          v-model="searchForm.questionTags"
          filterable
          multiple
          :multiple-limit="3"
        >
          <el-option
            v-for="item in tags"
            :key="item.id"
            :label="item.tags"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label=" 有答案">
        <el-select
          v-model="searchForm.hasAnswer"
          @blur="questionPage"
          @keyup.enter.native="questionPage"
        >
          <el-option label="不限" value="0" />
          <el-option label="是" value="1" />
          <el-option label="否" value="2" />
        </el-select>
      </el-form-item>
      <search-buttons
        :export-flag="true"
        :fetch-data="questionPage"
        :export-excel="export2Excel"
        :add-fun="addQuestion"
      />
    </el-form>
    <!--表格-->
    <el-table :data="tableData" border stripe empty-text="暂无数据">
      <el-table-column type="index" width="50" label="序号" />
      <el-table-column prop="questionName" label=" 题目" />
      <el-table-column prop="companyPostId" label=" 公司部门">
        <template slot-scope="scope">
          <span>{{ scope.row.company.companyName }} / {{ scope.row.dept.deptName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="interviewTime" label=" 面试时间" />
      <el-table-column prop="questionLevel" label=" 难度">
        <template slot-scope="scope">
          <span v-if="scope.row.questionLevel === 0">简单</span>
          <span v-if="scope.row.questionLevel === 1">适中</span>
          <span v-if="scope.row.questionLevel === 2">困难</span>
          <span v-if="scope.row.questionLevel === 3">地狱</span>
        </template>
      </el-table-column>
      <el-table-column prop="questionTags" label="标签">
        <template slot-scope="scope">
          <el-tag
            v-for="(item,id) in scope.row.tagsList"
            :key="id"
            style="margin: 0 5px"
          >
            {{ item.tags }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="showNum" width="50" label="展现">
        <template slot-scope="scope">
          <span>{{ scope.row.showNum | numFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="meetNum" width="50" label=" 遇到">
        <template slot-scope="scope">
          <span>{{ scope.row.meetNum | numFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="collectionNum" width="50" label=" 收藏">
        <template slot-scope="scope">
          <span>{{ scope.row.collectionNum | numFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="240">
        <template slot-scope="scope">
          <operation-buttons
            :detail-fun="toDetail"
            :last-search="searchForm"
            :edit-fun="editQuestion"
            :del-fun="delById"
            :row="scope.row"
          />
        </template>
      </el-table-column>
    </el-table>
    <div>
      <!-- 分页 -->
      <pagination
        :page.sync="searchForm.currentPage"
        :total="total"
        :limit.sync="searchForm.pageSize"
        @pagination="questionPage"
      />
    </div>
  </div>
</template>
<script>
import sysInterviewQuestion from '@/api/interviewQuestion'
import Pagination from '@/components/Pagination/index'
import SearchButtons from '@/components/SearchButtons/index'
import { mapGetters } from 'vuex'
import OperationButtons from '@/components/OperationButtons/index'
import sysQuestionLabel from '@/api/questionLabel'
import { changeSearchFrm } from '@/utils/changeSeaarchForm'
import { popAutoHeightDialog } from '@/utils/popDialog'
export default {
  components: {
    Pagination,
    SearchButtons,
    OperationButtons
  },
  filters: {
    numFilter(val) {
      if (val == null || val === '' || val === undefined) {
        return '--'
      }
      return val
    }
  },
  data() {
    return {
      name: 'SysInterviewQuestion',
      searchForm: {
        currentPage: 1,
        pageSize: 10,
        questionNameList: [],
        startTime: '',
        endTime: ''
      },
      interviewTime: [],
      total: 0,
      tableData: [],
      companyList: [
        {
          id: 1,
          companyName: '公司'
        }
      ],
      options: [
        {
          id: 1,
          keywords: 'Java'
        },
        {
          id: 2,
          keywords: 'Mysql'
        },
        {
          id: 3,
          keywords: 'Spring'
        }
      ],
      tags: []
    }
  },
  computed: {
    ...mapGetters([
      'roles',
      'displayOp'
    ])
  },
  watch: {
    interviewTime: {
      deep: true,
      handler(newVal, oldVal) {
        if (newVal) {
          this.searchForm.startTime = newVal[0]
          this.searchForm.endTime = newVal[1]
        } else {
          this.searchForm.startTime = ''
          this.searchForm.endTime = ''
        }
      }
    }
  },
  created() {
    changeSearchFrm(this)
    this.questionPage()
    this.allTags()
  },
  methods: {
    allTags() {
      sysQuestionLabel.searchTags().then(resp => {
        this.tags = resp.data
      })
    },
    delById(id) {
      sysInterviewQuestion.delById(id).then(resp => {
        this.$message.info(resp.message)
        this.questionPage()
      })
    },
    clearSearchForm() {
      this.searchForm = {}
    },
    downloadTemplate() {
      window.location.href = 'http://localhost:9527/sysInterviewQuestion/template'
    },
    export2Excel() {
      sysInterviewQuestion.export2Excel({ ...this.searchForm })
    },
    questionPage() {
      sysInterviewQuestion.questionPage(this.searchForm).then(resp => {
        this.tableData = resp.data.data
        this.total = resp.data.total
        this.searchForm.pageNum = resp.data.pageNum
        this.searchForm.currentPage = resp.data.currentPage
      })
    },
    // 根据id跳转答案详情页
    toDetail(id) {
      this.$router.push(`/question/details/${id}`)
    },
    addQuestion() {
      this.popForm(0, null, '添加问题')
    },
    editQuestion(id) {
      this.popForm(1, id, '编辑问题')
    },
    popForm(type, id, title) {
      popAutoHeightDialog(
        'views/interviewQuestion/form', '800px',
        this.questionPage, { type, id, title }
      )
    }
  }
}
</script>
<style>
.el-table__header-wrapper table,
.el-table__body-wrapper table {
  width: 100%;
}
</style>
